// pages/user/user.js
import { wechatLogin, decryptPhoneNumber, updatePeriodNutrition } from '../../http/api';
import * as echarts from '../../components/ec-canvas/echarts';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl: '', // 用户头像
    nickName: '',  // 用户昵称
    gender: '',    // 用户性别（0: 未知, 1: 男, 2: 女）
    genderText: '', // 性别文本
    openId: '', // 微信登录凭证
    sessionKey: '', // 后端返回的 session_key
    loginstate: "0", // 登录状态
    userEntity: null, // 用户信息
    terminal: "", // 设备信息
    osVersion: "", // 系统版本
    phoneNumber: "", // 用户手机号
    showModal: false, // 登录弹窗状态
    modalAnimation: {}, // 弹窗动画
    selectedFields: 'day', // picker 的字段类型，默认为按天选择
    selectedDate: '',      // 当前选中的日期
    periods: ['每日', '每月', '每年'],
    selectedIndex: 0, // 当前选中的时间范围索引
    ec: {
      onInit: initChart
    }  
  },
  onShow() {
    this.onLoad();
 },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // 检查本地是否有用户信息
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        avatarUrl: userInfo.avatarUrl,
        nickName: userInfo.nickName || userInfo.phoneNumber, // 优先显示昵称，没有则显示手机号
        gender: userInfo.gender,
        genderText: userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未知',
        loginstate: userInfo.loginstate || "0" // 恢复登录状态
      });
       // 用户已登录，立即加载图表数据
      this.initializeChartData();
    } else {
      // 未登录，图表保持空状态
      this.setData({ chartInitialized: false });
    }
     // 获取设备信息和系统版本
     const res = wx.getDeviceInfo();
     this.setData({
       terminal: res.platform,
       osVersion: res.system,
     });    
    
      // 设置默认日期为今天
      const today = new Date();
      const formattedDate = `${today.getFullYear()}-${padZero(today.getMonth() + 1)}-${padZero(today.getDate())}`;
      this.setData({ selectedDate: formattedDate });
  },

  initializeChartData() {
    const today = new Date();
    const date = `${today.getFullYear()}-${padZero(today.getMonth() + 1)}-${padZero(today.getDate())}`;
    const period = 1;
    const userId = this.data.userId || getApp().globalData.userId;
  
    if (!userId) return;
  
    const params = { userId, date, period };
    this.loadChartData(params);
  },
  // 点击用户信息区域
  onUserInfoClick() {
    if (this.data.loginstate === "1") { // 已登录状态
      wx.showToast({
        title: '已登录',
        icon: 'none'
      });
    } else { // 未登录状态
      this.showModal();
    }
  },

  // 显示弹窗
  showModal() {
    // 创建动画
    const animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease',
    });
    animation.translateY(0).step(); // 从下方滑出
    this.setData({
      showModal: true,
      modalAnimation: animation.export(),
    });
  },

  // 隐藏弹窗
  hideModal() {
    // 创建动画
    const animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease',
    });
    animation.translateY('100%').step(); // 滑回下方
    this.setData({
      modalAnimation: animation.export(),
    });

    // 延迟关闭弹窗
    setTimeout(() => {
      this.setData({
        showModal: false,
      });
    }, 300);
  },
  // 获取用户手机号
  getPhoneNumber(e) {
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      const { encryptedData, iv } = e.detail;
      // 先调用 wx.login 获取 sessionKey
      wx.login({
        success: (loginRes) => {
          if (loginRes.code) {
            wechatLogin({ code: loginRes.code })
              .then((response) => {
                if (response.code === 200) {
                  const { sessionKey, openId, userId } = response.data;
                  // 更新 sessionKey 后再解密
                  this.setData({ sessionKey, openId, userId }, () => {
                    // 确保 sessionKey 更新后再调用 decryptPhoneNumber
                    decryptPhoneNumber({
                      encryptedData,
                      iv,
                      sessionKey,
                      openId,
                    })
                      .then((decryptRes) => {
                        if (decryptRes.code === 200) {
                          const phoneNumber = decryptRes.data.phoneNumber;

                          // 对手机号进行脱敏处理（如：138****1234）
                          const maskedPhone = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                          // 更新数据，设置nickName为手机号
                          this.setData({ 
                            phoneNumber,
                            userId,                          
                            nickName: maskedPhone, // 这里设置nickName为手机号
                            loginstate: "1" // 设置登录状态为已登录
                          });
                          
                          // 保存用户信息到本地
                          wx.setStorageSync('userInfo', {
                            ...this.data,
                            phoneNumber,                            
                            nickName: maskedPhone,                            
                          });
                          wx.showToast({ title: '登录成功', icon: 'success' });

                          this.initializeChartData(); 
                          
                          loadChartData(params)
                          this.hideModal();
                        }
                      })
                  });
                } else {
                  wx.showToast({ title: response.msg || '登录失败', icon: 'none' });
                }
              })
              .catch((err) => {
                wx.showToast({ title: '网络错误', icon: 'none' });
              });
          }
        },
      });
    } else {
      wx.showToast({ title: '用户拒绝授权', icon: 'none' });
    }
  },

  onPeriodChange(e) {
    const index = e.detail.value;
    const fieldsMap = ['day', 'month', 'year']; // 对应 picker 的字段类型

    // 获取当前选中的周期
    const period = fieldsMap[index];
    // 获取 API 参数
    const params = this.getApiParams(this.data.selectedDate, period);
    this.setData({
      selectedIndex: index,
      selectedFields: period,
      selectedDate:params.date
    });

    if (params) {
      this.loadChartData(params);
    }
  },
  /**
   * 选择日期
   */
  onDateChange(e) {
    const date = e.detail.value;
    this.setData({ selectedDate: date });
    // 根据当前时间范围重新加载数据
    const period = ['daily', 'monthly', 'yearly'][this.data.selectedIndex];
    // 获取 API 参数
    const params = this.getApiParams(date, period);
    if (params) {
      this.loadChartData(params);
    }
  },

  loadChartData(params) {
    const { userId, period, date } = params;
    if (!userId) {
      wx.showToast({ title: '请先登录', icon: 'none' });
      return;
    }
    wx.showLoading({ title: '加载中...' });
    updatePeriodNutrition(userId, period, date)
      .then(res => {
        if (res.data.success) {          
          const { total, mealSummaries } = res.data;

          // 将 mealSummaries 转换为数组
          const mealSummariesArray = Object.keys(mealSummaries).map(key => ({
            mealType: key,
            ...mealSummaries[key]
          }));

          // 添加总计数据
          mealSummariesArray.push({
            mealType: "总计",
            ...total
          });

          // 检查数据是否为空
          if (!mealSummariesArray || mealSummariesArray.length === 0) {
            console.warn('后端返回的数据为空');
            wx.showToast({ title: '暂无数据', icon: 'none' });
            return;
          }

          // 更新图表
          this.updateChart(mealSummariesArray);
        } else {
          wx.showToast({ title: '加载失败', icon: 'none' });
        }
      })
      .catch(err => {
        wx.showToast({ title: '网络错误', icon: 'none' });
      })
      .finally(() => {
        wx.hideLoading();
      });
  },

  updateChart(data) {
    try {
      
      const chartComponent = this.selectComponent('#myChart-dom');
      
      if (!chartComponent) {
        throw new Error('未找到 myChart 组件');
      }
      
      const chart = chartComponent.chart;
      if (!chart) {
        throw new Error('图表未初始化');
      }

       // 定义餐次映射表
      const mealTypeMap = {
        1: '早餐',
        2: '午餐',
        3: '晚餐',
        4: '加餐',
      };
      // 将 mealType 映射为中文标签
      const formattedData = data.map(item => ({
        ...item,
        mealType: mealTypeMap[item.mealType] || item.mealType, // 如果没有匹配项，保留原始值
        totalCalories: parseFloat(item.totalCalories.toFixed(1)), // 格式化为保留一位小数
      }));
      const option = {
        tooltip: {},
        xAxis: {
          type: 'category',
          data: formattedData.map(item => item.mealType)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '热量',
            type: 'bar',
            data: formattedData.map(item => item.totalCalories)
          }
        ]
      };
      
      chart.setOption(option);
    } catch (error) {
      console.error('图表更新失败:', error.message);
      wx.showToast({ title: '图表更新失败', icon: 'none' });
    }
  },
  getApiParams(date, period) {
    const userId =  wx.getStorageSync('userInfo').userId;
    if (!userId) {
      wx.showToast({ title: '请先登录', icon: 'none' });
      return null;
    }
  
    // 格式化日期（默认使用当前日期）
    const formattedDate = date || new Date().toISOString().split('T')[0].replace(/-/g, '');
  
    // 映射周期（1: 每日, 2: 每月, 3: 每年）
    const periodMap = {
      daily: 1,
      monthly: 2,
      yearly: 3
    };
    const apiPeriod = periodMap[period] || 1; // 默认为每日
  
    return { userId, period: apiPeriod, date: formattedDate };
  }
});

// 独立的图表初始化函数
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width,
    height,
    devicePixelRatio: dpr // 设备像素比
  });

  canvas.setChart(chart); // 设置到 canvas 上

  const today = new Date();
  const date = `${today.getFullYear()}-${padZero(today.getMonth() + 1)}-${padZero(today.getDate())}`;
  const userId = getApp().globalData.userId;
  const period = 1;
  const params ={ userId, date, period};
  
  // 默认加载每日数据
  const pageInstance = getCurrentPages().pop(); // 获取当前页面实例
  pageInstance.loadChartData(params);

  
  // chart.setOption(option);
  return chart; // 返回图表实例
}
// 工具函数：补零
function padZero(num) {
  return num < 10 ? `0${num}` : num;
}